import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'space_logic.dart';

class SpacePage extends StatelessWidget {
  SpacePage({Key? key}) : super(key: key);

  final logic = Get.put(SpaceLogic());

  @override
  Widget build(BuildContext context) {
    logic.state.avatar = logic.read('space_avatar_path', defaultValue: '', global: true);
    logic.state.count = logic.read("sport_target_step", defaultValue: 0, global: true);
    bool isLogin = logic.read('login_state', defaultValue: false, global: true);
    logic.state.nickName = !isLogin?LocaleKeys.space_login_state.ts:logic.read("space_person_name", defaultValue: '', global: true);
    logic.state.userId = isLogin?logic.read('login_id', defaultValue: '', global: true):'';

    var borderRadius = BorderRadius.circular(10);

    return Scaffold(
      // backgroundColor: Color(0xFFF5F9FB),
      appBar: AppBar(
        // backgroundColor: Color(0xFFF5F9FB),
        title: Text(LocaleKeys.space.ts, style: Theme.of(context).textTheme.titleLarge,),
      ),
      body: ListView(
        padding: EdgeInsets.only(top: 28.h,),
        children: [
          Container(
            margin: EdgeInsets.fromLTRB(42.w, 0, 42.w, 42.w),
            child:  Ink(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: borderRadius,
              ),
              child: InkResponse(
                splashColor: ColorConst.activeColor,
                borderRadius: borderRadius,
                highlightShape: BoxShape.rectangle,
                highlightColor: ColorConst.activeColor,
                containedInkWell: true,
                onTap: () async {
                  // bool loginState = logic.read('login_state', defaultValue: false, global: true);
                  // if(loginState) {
                    await Get.toNamed('/space/person');
                    bool isLogin = logic.read('login_state', defaultValue: false, global: true);
                    logic.state.nickName = !isLogin?LocaleKeys.space_login_state.ts:logic.read("space_person_name", defaultValue: '', global: true);
                    logic.state.userId = isLogin?logic.read('login_id', defaultValue: '', global: true):'';
                    logic.update(['space_name','space_user_id']);
                  // } else {
                  //   var result = await Get.toNamed('/login', arguments: {'isFromSpace':true});
                  //   if(result.containsKey('space_person_name')) {
                  //     logic.state.nickName=result['space_person_name'];
                  //   }
                  //   if(result.containsKey('user_id')) {
                  //     logic.state.userId=result['user_id'];
                  //   }
                  //   logic.update(['space_name','space_user_id']);
                  // }
                },
                child: Container(
                  margin: EdgeInsets.fromLTRB(20.w, 16.w, 10.w, 16.h),
                  child: Row(
                      children: [
                        GetBuilder<SpaceLogic>(
                            id: "space_avatar",
                            builder: (_){
                              return Visibility(
                                  visible: logic.state.avatar.isNotEmpty,
                                  replacement: Container(
                                    margin: EdgeInsets.only(top: 42.h),
                                    alignment: Alignment.center,
                                    width: 229.w, height: 229.w,
                                    child: Image.asset('assets/images/space/icon_avatar_default.png'),
                                  ),
                                  child: Container(
                                      width: 229.w,
                                      height: 229.w,
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(50),
                                          image: DecorationImage(
                                              fit: BoxFit.fill,
                                              image: FileImage(File(logic.state.avatar))
                                          ))
                                  ));
                            }),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            GetBuilder<SpaceLogic>(
                                id: "space_name",
                                builder: (_){
                                  return Container(padding: EdgeInsets.only(left: 42.w,),
                                      width: 1.sw-450.w,
                                      child: Text(logic.state.nickName, overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 54.sp, height: 2),));
                                  return Padding(padding: EdgeInsets.only(left: 15.6), child:Text(logic.state.nickName, style: TextStyle(fontSize: 54.sp, height: 2),));
                                }),
                            // Padding(padding: EdgeInsets.only(left: 30), child:Text('皮卡丘', style: TextStyle(fontSize: 18, height: 2),)),
                            GetBuilder<SpaceLogic>(
                                id: "space_user_id",
                                builder: (_){
                                  return Container(padding: EdgeInsets.only(left: 42.w, right: 42.w),
                                      width: 1.sw-400.w,
                                      child: Text('ID ${logic.state.userId}', overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 42.sp, color: Colors.grey),));
                                }),
                          ],
                        ),
                        Expanded(child: Container()),
                        Padding(padding: EdgeInsets.only(right: 15.w),
                            child:Image.asset('assets/images/space/icon_space_arrow.png', width: 8,height: 18,)
                        )
                      ]
                  ),
                ),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(42.w, 10.h, 42.w, 0),
            // decoration: BoxDecoration(
            //     borderRadius: BorderRadius.circular(10),
            //     color: Colors.white
            // ),
            child: Column(
              children: [
                // _buildListTile(LocaleKeys.space_steps.ts,
                //     Image.asset("assets/images/space/icon_space_01.png"),
                //     "space_count",
                //     logic.state.count.toString(), true, false,
                //     onTap: (){Get.toNamed('space/steps');}
                // ),
                // _buildListTile(LocaleKeys.space_train.ts,
                //     Image.asset("assets/images/space/icon_space_02.png"), "", "", false, false,
                //     onTap: (){Get.toNamed('/space/train');}
                // ),
                _buildListTile(LocaleKeys.space_weekly.ts,
                    Image.asset("assets/images/space/icon_space_03.png"), "", "", true, false,
                    onTap: (){Get.toNamed('/space/weekly');}
                ),
                // _buildListTile(LocaleKeys.space_friend.ts,
                //     Image.asset("assets/images/space/icon_space_04.png"), "", "", false, false,
                //     onTap: (){Get.toNamed('/space/friends');}
                // ),
                _buildListTile(LocaleKeys.space_target.ts,
                    Image.asset("assets/images/space/icon_space_05.png"), "", "", false, true,
                    onTap: (){Get.toNamed('/space/traget');}
                ),
                // _buildListTile(LocaleKeys.space_theme.ts,
                //     Image.asset("assets/images/space/icon_space_06.png"), "", "", false, true,
                //     onTap: (){}
                // ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(42.w, 30.h, 42.w, 0),
            // decoration: BoxDecoration(
            //   borderRadius: BorderRadius.circular(10),
            //   color: Colors.white
            // ),
            child: _buildListTile(LocaleKeys.space_service.ts,
                Image.asset("assets/images/space/icon_space_07.png"), "", "", true, true,
                onTap: (){Get.toNamed('/space/service');}
            ),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(42.w, 30.h, 42.w, 0),
            // decoration: BoxDecoration(
            //     borderRadius: BorderRadius.circular(10),
            //     color: Colors.white
            // ),
            child: Column(
              children: [
                _buildListTile(LocaleKeys.space_setting.ts,
                  Image.asset("assets/images/space/icon_space_08.png"), "", "", true, false,
                  onTap: (){Get.toNamed('/space/setting');},
                ),
                _buildListTile(LocaleKeys.space_help.ts,
                  Image.asset("assets/images/space/icon_space_09.png"), "", "", false, true,
                  onTap: (){Get.toNamed('space/help');},
                ),
              ],
            ),
          ),
        ],
      ) ,
    );
  }

  Widget _buildListTile(
      String title, Image image, String id, String trailing,isFirst, isLast, {onTap}) {
    var borderRadius = BorderRadius.circular(0);
    if (isFirst && !isLast) {
      borderRadius = const BorderRadius.vertical(top: Radius.circular(10));
    } else if (!isFirst && isLast) {
      borderRadius = const BorderRadius.vertical(bottom: Radius.circular(10));
    } else if (isFirst && isLast) {
      borderRadius = BorderRadius.circular(10);
    }

    return Ink(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: borderRadius,
      ),
      child: InkResponse(
        onTap: onTap,
        splashColor: ColorConst.activeColor,
        borderRadius: borderRadius,
        highlightShape: BoxShape.rectangle,
        highlightColor: ColorConst.activeColor,
        containedInkWell: true,
        child: ListTile(
            contentPadding: EdgeInsets.fromLTRB(30.w, 0, 30.w, 0),
            leading: Container(
              width: 100.w,
              height: 100.w,
              child: image,
            ),
            title: Text(title, style: TextStyle(fontSize: 48.sp)),
            trailing: SizedBox(
              width: 70,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GetBuilder<SpaceLogic>(
                      id: id,
                      builder: (_){
                        return Text(id=="space_count"?logic.state.count>0?logic.state.count.toString():'':'', style: TextStyle(fontSize: 42.sp, height: 2));
                      }),
                  const Icon(
                    Icons.arrow_forward_ios,
                    size: 16,
                  ),
                ],
              ),
            ),),
      ),
    );
  }
}

